<!DOCTYPE html>
<html>
<head lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta content="width=device-width, initial-scale=1.0, user-scalable=no, minimal-ui" name="viewport"/>
    <title></title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <div class="mainContainer">
        <header>
            <div class="menuButton icon-reorder"></div>
        </header>
        <div class="container">
            <div class="mainIC">
                <div class="orderFilter">
                    <button class="groupButton groupButtonSelected">全部</button><button class="groupButton">待服务</button><button class="groupButton">待结帐</button><button class="groupButton">已结帐</button>
                </div>
                <div class="orderContainer">
                    <div class="orderBlock dynamicOrderBlockSize">单号:20140809ABCD<br/>桌位:012<br/>人数:8<br/>日期:2014-08-09 23:58</div>
                    <div class="orderBlock dynamicOrderBlockSize"></div>
                    <div class="orderBlock dynamicOrderBlockSize"></div>
                    <div class="orderBlock dynamicOrderBlockSize"></div>
                    <div class="orderBlock dynamicOrderBlockSize"></div>
                    <div class="orderBlock dynamicOrderBlockSize"></div>
                </div>
            </div>
        </div>
        <footer>Copy Right @ SohoTiger</footer>
    </div>
    <menu class="mainMenu">
        <menuitem>AAAAA</menuitem>
        <menuitem>
            AAAAA
            <div class="subMenu">BBBBBB</div>
            <div class="subMenu">BBBBBB</div>
            <div class="subMenu">BBBBBB</div>
            <div class="subMenu">BBBBBB</div>
        </menuitem>
        <menuitem>AAAAA</menuitem>
        <menuitem>AAAAA</menuitem>
        <menuitem>AAAAA</menuitem>
        <menuitem>
            AAAAA
            <div class="subMenu">BBBBBB</div>
            <div class="subMenu">BBBBBB</div>
            <div class="subMenu">BBBBBB</div>
        </menuitem>
        <menuitem>
            AAAAA
            <div class="subMenu">BBBBBB</div>
            <div class="subMenu">BBBBBB</div>
        </menuitem>
    </menu>
    <script type="text/javascript" src="js/modernizr-latest.js"></script>
    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
        $('.orderFilter').on('click', '.groupButton', function(){
           $(this).parent().find('.groupButtonSelected').removeClass('groupButtonSelected');
           $(this).addClass('groupButtonSelected')
        });

        (function(){
            var dynamicSizeStyleSheet = $('<style type="text/css" title="dynamicSizeStyleSheet">notExistElement{color:#FFF}</style>');
            $('head').append(dynamicSizeStyleSheet);
            var sheets = dynamicSizeStyleSheet[0].sheet;
            var defaultWidth = 280;
            var totalWidth, count, dynamicWidth;
            var autoResizeBlock = function(){
                sheets.removeRule(0);
                totalWidth = $('.orderContainer').width();
                count = parseInt((totalWidth - 10) / (defaultWidth + 10));
                dynamicWidth = parseInt((totalWidth - 10) / count) - 10;
                sheets.addRule('.dynamicOrderBlockSize', 'width:' + dynamicWidth + 'px;height:' + (dynamicWidth / 2) + 'px');
                var scrollbarWidth = $('.orderContainer')[0].offsetWidth - $('.orderContainer')[0].clientWidth;
                if(scrollbarWidth !== 0){
                    sheets.removeRule(0);
                    totalWidth = $('.orderContainer').width() - scrollbarWidth;
                    count = parseInt((totalWidth - 10) / (defaultWidth + 10));
                    dynamicWidth = parseInt((totalWidth - 10) / count) - 10;
                    sheets.addRule('.dynamicOrderBlockSize', 'width:' + dynamicWidth + 'px;height:' + (dynamicWidth / 2) + 'px');
                }
            }
            autoResizeBlock();
            $(window).bind('resize', autoResizeBlock);
        })();


    </script>
</body>
</html>